import Sprite from '../base/sprite';
import { SCREEN_WIDTH, SCREEN_HEIGHT } from '../render';

const BACKGROUND_WIDTH = 512;
const BACKGROUND_HEIGHT = 512;
const BACKGROUND_SPEED = 2;

/**
 * 游戏背景类
 * 提供 update 和 render 函数实现无限滚动的背景功能
 */
export default class Background {
  constructor() {
    // 安全地获取屏幕尺寸
    this.width = SCREEN_WIDTH || 375;
    this.height = SCREEN_HEIGHT || 667;
  }

  update() {
    // 背景更新逻辑
  }

  render(ctx) {
    if (!ctx) {
      console.warn('Canvas上下文不可用，跳过背景渲染');
      return;
    }
    
    try {
      // 绘制渐变背景
      this.drawGradientBackground(ctx);
      
      // 绘制装饰性图案
      this.drawDecoration(ctx);
      
      // 绘制网格背景
      this.drawGrid(ctx);
    } catch (error) {
      console.warn('背景渲染失败:', error);
    }
  }

  drawGradientBackground(ctx) {
    // 创建径向渐变背景
    const gradient = ctx.createRadialGradient(
      this.width / 2, this.height / 2, 0,
      this.width / 2, this.height / 2, Math.max(this.width, this.height) / 2
    );
    gradient.addColorStop(0, '#667eea');
    gradient.addColorStop(0.5, '#764ba2');
    gradient.addColorStop(1, '#f093fb');
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, this.width, this.height);
    
    // 添加额外的渐变层
    const overlayGradient = ctx.createLinearGradient(0, 0, 0, this.height);
    overlayGradient.addColorStop(0, 'rgba(255, 255, 255, 0.1)');
    overlayGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.05)');
    overlayGradient.addColorStop(1, 'rgba(255, 255, 255, 0.1)');
    
    ctx.fillStyle = overlayGradient;
    ctx.fillRect(0, 0, this.width, this.height);
  }

  drawDecoration(ctx) {
    // 绘制装饰性几何图案
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
    
    // 绘制圆形装饰
    for (let i = 0; i < 6; i++) {
      const x = (this.width / 7) * (i + 1);
      const y = this.height / 4 + Math.sin(Date.now() / 3000 + i) * 30;
      const radius = 20 + Math.sin(Date.now() / 2000 + i) * 5;
      
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.fill();
    }
    
    // 绘制矩形装饰
    ctx.fillStyle = 'rgba(255, 255, 255, 0.08)';
    for (let i = 0; i < 4; i++) {
      const x = this.width - 100 - i * 40;
      const y = this.height / 2 + Math.cos(Date.now() / 2500 + i) * 20;
      const size = 15 + Math.sin(Date.now() / 1800 + i) * 3;
      
      ctx.fillRect(x, y, size, size);
    }
    
    // 绘制三角形装饰
    ctx.fillStyle = 'rgba(255, 255, 255, 0.06)';
    for (let i = 0; i < 3; i++) {
      const x = 50 + i * 60;
      const y = this.height - 100 + Math.sin(Date.now() / 2200 + i) * 15;
      
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + 20, y - 20);
      ctx.lineTo(x + 40, y);
      ctx.closePath();
      ctx.fill();
    }
  }

  drawGrid(ctx) {
    // 绘制微妙的网格背景
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
    ctx.lineWidth = 1;
    
    const gridSize = 50;
    
    // 垂直线
    for (let x = 0; x <= this.width; x += gridSize) {
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, this.height);
      ctx.stroke();
    }
    
    // 水平线
    for (let y = 0; y <= this.height; y += gridSize) {
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(this.width, y);
      ctx.stroke();
    }
  }
}
